<template>
	<div class="Register">
		<el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="94px">
			<div class="title-container">
				<h3 class="title">手机号登录</h3>
			</div>
			<el-form-item label="手机号码" prop="username">
				<el-input v-model.trim="form.username" placeholder="请输入登录账号"/>
			</el-form-item>
			<el-form-item label="短信验证码" prop="code">
				<div class="flexInput">
					<el-input v-model="form.code" />
					<el-button type="primary" :disabled="!!time || !form.username" style="margin-left:20px"
						@click="getCode()">
						{{ !time ? `获取验证码` : `重新获取(${ time }s)` }}
					</el-button>
				</div>
			</el-form-item>
			<el-form-item label="用户类型" prop="type" class="radioItem" style="margin-bottom:0">
				<el-radio-group v-model="form.type">
					<el-radio v-for="item in typeJson" :key="item.value" :label="item.value">
						{{ item.label }}
					</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-button class="loginBt" :loading="loading" type="primary" @click="submit()">
				登录
			</el-button>
			<div class="toReg">
				<!-- <span>忘记密码？</span> -->
				<span></span>
				<span @click="showLogin">账户登录></span>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				form: {
					code: '',
					username: '',
					type: 1
				},
				dialogStatus: '',
				dialogFormVisible: false,
				rules: {
					type: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					username: [{
						required: true,
						validator: this.$mobileValidator,
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}]
				},
				typeJson: Object.assign({}, this.$store.state.user.typeJson),
				loading: false,
				time: 0,
				timeInterval: null,
				redirect: undefined,
				otherQuery: {},
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					const query = route.query;
					if (query) {
						this.redirect = query.redirect;
						this.otherQuery = this.getOtherQuery(query);
					}
				},
				immediate: true
			}
		},
		methods: {
			showLogin() {
				this.$emit('showLogin')
			},
			// 获取验证码
			getCode() {
				this.startGoing(60)
				const params = {
					mobile: this.form.username,
					userType: this.form.type,
					type: 7
				}
				this.$store.dispatch('user/getCode', params)
					.then(res => {
						this.$message({
							message: '验证码已发送',
							type: 'success'
						})
					})
					.catch(() => {
						// console.log(err)
						this.clearTimeFlow()
					})
			},
			// 验证码倒计时
			startGoing(val) {
				if (this.timeInterval) return
				this.time = val
				this.timeInterval = setInterval(() => {
					this.time--
					if (this.time <= 0) {
						this.clearTimeFlow()
					}
				}, 1000)
			},
			// 清除
			clearTimeFlow() {
				clearInterval(this.timeInterval)
				this.time = 0
				this.timeInterval = null
			},
			// 确定登录
			submit() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.loading = true;
						this.$store
							.dispatch("user/login", this.loginForm)
							.then(response => {
								this.$store.dispatch("/common/login", true).then(res => {
									this.loading = false;
									if (res.status !== 1) {
										const isFront = this.$route.query.redirect.includes("/front");
										if (!isFront) {
											const message = this.returnMessage(res.status);
											this.$alert(message, {
												confirmButtonText: "确定",
												callback: action => {}
											});
											this.$router.push({
												path: "/profile/index"
											});
										} else {
											this.$router.push({
												path: this.redirect || "/front-home",
												query: this.otherQuery
											});
										}
									} else {
										this.$router.push({
											path: this.redirect || "/",
											query: this.otherQuery
										});
									}
								});
							})
							.catch(() => {
								this.loading = false;
							});
					}
					
				})
			},
			getOtherQuery(query) {
			  return Object.keys(query).reduce((acc, cur) => {
			    if (cur !== "redirect") {
			      acc[cur] = query[cur];
			    }
			    return acc;
			  }, {});
			},
		}
	}
</script>

<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

	$bg: #fff;
	$light_gray: #000;
	$cursor: #000;
	$them: #965f29;

	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.Register .el-input input {
			color: $cursor;
		}
	}

	/* reset element-ui css */
	.Register {
		.el-select {
			width: calc(100% - 30px);

			.el-input {
				width: 100%;
			}
		}

		.el-input {
			display: inline-block;
			height: 53px;

			input {
				// background: transparent;
				border: 1px solid #e1e1e1;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 15px;
				color: $light_gray;
				height: 53px;
				caret-color: $cursor;

				&:-webkit-autofill {
					box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0.1) inset !important;
					-webkit-text-fill-color: $cursor !important;
				}
			}
		}

		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			// background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;

			.el-radio__input.is-checked {
				.el-radio__inner {
					border-color: $them;
					background: $them;
				}
			}

			.el-radio__input.is-checked+.el-radio__label {
				color: $them;
			}

			.el-form-item__label {
				line-height: 53px;
			}
		}

		.radioItem {
			.el-form-item__label {
				line-height: 42px;
			}

			.el-form-item--medium {
				.el-form-item__content {
					line-height: 42px;
				}
			}
		}

		.loginBt {
			width: 100%;
			margin: 5px 0 20px;
			padding: 20px 0;
			font-size: 18px;
			background: $them;
			border-radius: 5px;
			border: 0;

			@media only screen and (max-width: 750px) {
				margin: 0;
				padding: 10px 0px 10px;
			}
		}

		.el-checkbox__input.is-checked+.el-checkbox__label {
			color: $them;
		}

		.el-checkbox__input.is-checked .el-checkbox__inner {
			background-color: $them;
			border-color: $them;
		}
	}
</style>

<style lang="scss" scoped>
	$them: #965f29;

	.Register {
		@media only screen and (max-width: 750px) {
			position: absolute;
			display: flex;
			justify-content: center;
			width: 100%;
			margin: 0;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		.flexInput {
			display: flex;

			.el-input {
				width: auto;
				flex: 1;
			}

			.el-button {
				background: #f6f6f6;
				border-radius: 5px;
				border-color: #e1e1e1;
				color: $them;
			}
		}

		.el-select {
			width: 100%;
		}

		.el-form {
			position: relative;
			padding: 32px 28px 47px;
			overflow: hidden;
			background: #fff;

			@media only screen and (max-width: 750px) {
				width: 90%;
				padding: 10px;
				border-radius: 10px;
			}

			.title-container {
				position: relative;

				.title {
					font-size: 25px;
					color: #000;
					margin: 15px auto 30px auto;
					font-weight: 400;
					
					@media only screen and (max-width: 750px) {
						font-size: 16px;
						margin: 0px auto 10px auto;
					}
				}
			}
		}

		.toReg {
			display: flex;
			justify-content: space-between;
			font-size: 15px;
			color: #000;
			margin-top: 10px;

			span {
				cursor: pointer;
			}
		}
	}
</style>
